'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { DocumentCheckIcon, ClockIcon, UserGroupIcon, BuildingOfficeIcon, ShieldCheckIcon, ChartBarIcon } from '@heroicons/react/24/outline';

export default function RegisterPage() {
  return (
    <div className="bg-white">
      {/* Banner Section */}
      <div className="relative h-[400px]">
        <Image
          src="/images/banner1.jpg"
          alt="企业工商注册"
          fill
          style={{ objectFit: 'cover' }}
          priority
        />
        <div className="absolute inset-0 bg-black/50" />
        <div className="relative h-full flex items-center justify-center">
          <div className="text-center">
            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8 }}
              className="text-4xl font-bold text-white mb-4"
            >
              企业工商注册
            </motion.h1>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              className="text-xl text-gray-200"
            >
              快人一步！即刻拥有自己的公司
            </motion.p>
          </div>
        </div>
      </div>

      {/* Service Features */}
      <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <DocumentCheckIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">公司注册</h3>
            <p className="text-gray-600">快速注册公司，极速代办公司注册流程，最快3天拿到工商营业执照</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <BuildingOfficeIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">工商变更</h3>
            <p className="text-gray-600">专业办理公司名称、地址、法人、经营范围等变更服务</p>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5, delay: 0.4 }}
            className="bg-white p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow"
          >
            <div className="flex items-center justify-center h-12 w-12 rounded-md bg-primary/10 text-primary mb-4">
              <ShieldCheckIcon className="h-6 w-6" />
            </div>
            <h3 className="text-lg font-semibold mb-2">公司注销</h3>
            <p className="text-gray-600">专业办理公司注销、清算、税务注销等一站式服务</p>
          </motion.div>
        </div>
      </div>

      {/* Service Content */}
      <div className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900">省时省心省力，足不出户开公司</h2>
            <p className="text-xl text-gray-600 mt-4">免费核名，极速代办工商执照，最快3天下照，全程专业工商顾问辅助解答疑难</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-4">服务内容</h3>
              <ul className="space-y-3 text-gray-600">
                <li>• 公司注册核准名称（查名确定公司名称）</li>
                <li>• 新版营业执照（三证合一、正副本）</li>
                <li>• 公司五章（企业公章、法人章、财务章、发票章、合同章）</li>
                <li>• 注册公司地址（因不同地区和政策，可能有所变）</li>
              </ul>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-4">服务优势</h3>
              <ul className="space-y-3 text-gray-600">
                <li>• 极简流程：公司注册流程极简、费用透明</li>
                <li>• 工商咨询：全程专业工商顾问辅助解答疑难</li>
                <li>• 专业顾问：规范化客户档案管理，保证用户信息和数据安全</li>
                <li>• 服务标准：免代办费，全程为您代理</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Service Details */}
      <div className="max-w-7xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div>
            <h3 className="text-xl font-semibold mb-4">服务时间</h3>
            <p className="text-gray-600">最快3天拿到营业执照（不同地区，工商执照办理时间有一定差异），随时提供工商类咨询服务</p>
          </div>
          <div>
            <h3 className="text-xl font-semibold mb-4">服务费用</h3>
            <p className="text-gray-600">不同地区和政策可能造成价格差距，详情请咨询工商顾问</p>
          </div>
          <div>
            <h3 className="text-xl font-semibold mb-4">准备资料</h3>
            <ul className="space-y-2 text-gray-600">
              <li>• 公司执照副本复印件</li>
              <li>• 企业名称（可提供多个备用）</li>
              <li>• 法定代表人或联系人手机、邮件等联系方式</li>
              <li>• 经营场所产权证明、租凭协议及房租发票</li>
            </ul>
          </div>
          <div>
            <h3 className="text-xl font-semibold mb-4">服务地区</h3>
            <p className="text-gray-600">上海、北京、天津、广州、杭州、南京、苏州、无锡、宁波、长沙、合肥、武汉、福州、等全国各线城市</p>
          </div>
        </div>
      </div>

      {/* Service Guarantee */}
      <div className="bg-primary py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center text-white">
            <h2 className="text-3xl font-bold mb-8">用心打造极致工商服务，专人全程办理</h2>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white/10 text-white mb-4 mx-auto">
                  <UserGroupIcon className="h-6 w-6" />
                </div>
                <h3 className="text-lg font-semibold mb-2">专属工商顾问</h3>
                <p className="text-sm">精选从业3年以上专家及资深工商代理人，随时为您提供工商注册公司咨询服务</p>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.2 }}
              >
                <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white/10 text-white mb-4 mx-auto">
                  <ClockIcon className="h-6 w-6" />
                </div>
                <h3 className="text-lg font-semibold mb-2">进度实时掌控</h3>
                <p className="text-sm">智能终端系统帮您随时查看办理进度，注册流程一清二楚，随时随地可查</p>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.4 }}
              >
                <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white/10 text-white mb-4 mx-auto">
                  <ChartBarIcon className="h-6 w-6" />
                </div>
                <h3 className="text-lg font-semibold mb-2">极简注册流程</h3>
                <p className="text-sm">极速代办公司注册，为客户打造定制化的极速体验，最快3天即可拿到营业执照</p>
              </motion.div>
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: 0.6 }}
              >
                <div className="flex items-center justify-center h-12 w-12 rounded-md bg-white/10 text-white mb-4 mx-auto">
                  <BuildingOfficeIcon className="h-6 w-6" />
                </div>
                <h3 className="text-lg font-semibold mb-2">一站式企业服务</h3>
                <p className="text-sm">开公司所需要的全部服务我们都有，一切为您打造一站式企业帮扶、全流程省心服务</p>
              </motion.div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
} 